<template>
  <el-container>
    <div
      class="accompanied-bygoods"
      v-if="Consignmentstatuss===0">
      <div
        class="title"
        v-if="needTitle">
        <!--  -->
        <div class="accompanied-bygoods-title-slotbaseInfo">
          <slot
            name="baseInfo"
            :baseInfo="baseInfo" />
        </div>
        <!--  -->
        <div class="ops">
          <el-button
            type="primary"
            v-if="false"
            @click="printOrder">查看随货同行</el-button>
          <el-button
            type="text"
            @click="showListMethod">{{ showlist?'收起':'展开' }}</el-button>
        </div>
      </div>
      <div class="list">
        <el-editable
          v-if="showlist"
          class="record-card-list"
          height="400"
          :columns="cardColumns"
          :data="cardData"
        >
          <template
            slot="default-placeholder"
            slot-scope="scope">
            <el-editable
              class="record-card-son-list"
              :data="scope.row[[rowTitle]]"
              height="200"
              :columns="cardSonColumns"
            />
          </template>
        </el-editable>
      </div>
      <el-dialog
        :visible.sync="flowOrderDialog"
        width="850px"
        class="purchasingdialog">
        <h3 class="dialogtitle">浙江麦子医疗有限公司销售清单</h3>
        <h6 class="dialogtitle">2019-5-6日 17:46:46</h6>
        <!-- <div>购买单位:</div>
        <div><span>收货地址</span><span>联系人</span><span>联系电话</span></div>-->
        <RecordInfo
          :record-form="dialogTitleInfo"
          :record-data="{}" />
        <div class="downloadpictures">
          <div>
            <el-button type="text">下载</el-button>
            <el-button type="text">打印</el-button>
          </div>
          <div>
            <img
              src
              alt >
          </div>
          <div>订单号</div>
        </div>
        <el-editable
          class="record-card-son-list"
          height="400"
          :columns="dialogcolumns" />
        <el-form
          :inline="true"
          ref="ruleForm"
          label-width="150px">
          <el-form-item
            v-for="(item, index) in dialogdetails"
            :key="index"
            :label="item.label">
            :
            <!-- {{ recordData[item.key] }} -->
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div
      class="accompanied-bygoods"
      v-if="Consignmentstatuss===1">
      <div class="title">
        <div class="accompanied-bygoods-title-slotbaseInfo">
          <slot
            name="baseInfo"
            :baseInfo="baseInfo" />
        </div>
        <div class="ops">
          <el-button @click="deleteconsignment">删除</el-button>
          <el-button
            type="primary"
            @click="confirmshipment">确认收货</el-button>
        </div>
      </div>
      <div class="list">
        <el-editable
          class="record-card-list"
          height="400"
          :columns="cardColumns"
          :data="cardData">
          <template
            slot="default-placeholder"
            slot-scope="scope">
            <el-editable
              class="record-card-son-list"
              :data="scope.row[[rowTitle]]"
              height="200"
              width="1000"
              :columns="cardSonColumns"
            />
          </template>
        </el-editable>
      </div>
    </div>
  </el-container>
</template>

<script>
import RecordInfo from '@/moduleComponents/common/detail/recordInfo'
import ElEditable from '@components/el-editable'
import { cloneDeep } from 'lodash'
export default {
  name: 'RecordZoomCard',
  components: { ElEditable, RecordInfo },
  data () {
    return {
      // 是否显示弹框,默认为false
      flowOrderDialog: false,
      // baseInfo: {
      //   name: 123,
      //   sex: 231,
      //   age: 12
      // },
      showlist: true
    }
  },
  created () {
    if (this.needTitle === false) {
      this.showlist = true
    }
  },
  props: {
    // 弹框列表详情
    dialogdetails: {
      default: () => [],
      type: Array
    },
    // 切换待发货状态
    Consignmentstatuss: {
      default: () => 0,
      type: Number
    },
    // 弹框列表表头
    dialogcolumns: {
      default: () => [],
      type: Array
    },
    // 请求弹框数据 url 请求方式 请求参数
    dialogDefaultUrl: {
      default: () => {},
      type: Object
    },
    // 列表表头
    cardColumns: {
      type: Array,
      default: () => []
    },
    // 子列表表头
    cardSonColumns: {
      type: Array,
      default: () => []
    },
    // 请求的数据,用于渲染表格数据
    cardData: {
      type: Array,
      default: () => []
    },
    // 是否需要标题行
    needTitle: {
      type: Boolean,
      default: false
    },
    curListInfo: {
      type: Object,
      default: () => {}
    },
    // 定义子列表数据的变量名称,根据这个变量找到cardData中的子列表数据
    rowTitle: {
      type: String,
      default: ''
    },
    baseInfo: {
      type: Object,
      default: () => {}
    },
    dialogTitleInfo: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
    this.reInitColumns()
  },
  methods: {
    // 如果没有子数据则不显示更多的按钮
    reInitColumns () {},
    printOrder () {
      // this.$emit('peerOrderList')
      this.flowOrderDialog = !this.flowOrderDialog
    },
    // 点击显示对应列表
    showListMethod () {
      this.showlist = !this.showlist
      console.log(this.showlist)
    },
    // 确认发货  confirmshipment
    confirmshipment () {
      this.$emit('slotboxconfirmshipment')
    },
    // 删除
    deleteconsignment () {
      this.$emit('slotboxdeletes')
    }
  }
}
</script>
<style lang="less">
.accompanied-bygoods {
  // display: flex;
  width: 100%;
  .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    height: 36px;
    line-height: 36px;
    border-bottom: 1px solid #b4b7bd;
    background: #eceef3;
    margin-top: 10px;

    &:hover {
      cursor: pointer;
    }

    .accompanied-bygoods-title-slotbaseInfo {
      line-height: 36px;
      height: 36px;
      > span {
        margin-right: 10px;
      }
      .solt-baseInfo-color {
        color: #06f;
        font-weight: 450;
        margin-left: 5px;
      }
    }
  }
  .el-dailog__body {
    padding: 10px 20px 30px 20px !important;
  }
  .purchasingdialog {
    .dialogtitle {
      text-align: center;
    }
    .downloadpictures {
      position: absolute;
      right: 0;
      top: 60px;
      width: 170px;
      display: inline-block;
    }
    div {
      span {
        margin-right: 25px;
      }
    }
  }
}
// .el-table__column-resize-proxy{
//   height: 700px !important;
// }
</style>
